<template>
  <div class="MusicBody">
    <nav v-if="flag">
      <router-link
        :to="item.webAddress"
        v-for="(item, index) in categoryList"
        :key="item.webAddress"
        :class="{ active: classChange(index) }"
        @click.native="change(index)"
        >{{ item.title }}</router-link
      >
    </nav>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "MusicBody",
  data() {
    return {
      dataIndex: 0,
      categoryList: [
        { webAddress: "/", title: "个性推荐" },
        { webAddress: "/exclusivecustom", title: "专属定制" },
        { webAddress: "/songlist", title: "歌单" },
        { webAddress: "/rankinglist", title: "排行榜" },
        { webAddress: "/singer", title: "歌手" },
        { webAddress: "/latestmusic", title: "最新音乐" },
      ],
    };
  },
  methods: {
    change(index) {
      this.dataIndex = index;
    },
    classChange(index) {
      return this.dataIndex === index ? true : false;
    },
  },
  computed: {
    flag() {
      return !this.$route.params.songs;
    },
  },
};
</script>

<style lang='scss' scoped>
@import "./MusicBody.scss";
</style>